<template>
  <div class="cumtom">

    <div class="cumtom-list" v-if="dataList && dataList.length>0">
      <div v-for="(item,index) in dataList" :key="index" class="list-tags"  v-if="index==0">
          <div class="list-name">{{item.label}}</div>
          <div class="list-unit">@{{item.WeChatName}}</div>
      </div>
      <div v-if="dataList && dataList.length>1" class="list-tags">
        <template >
          <div class="list-name">+{{dataList.length-1}}...</div>
        </template>
      </div>
    </div>
    <div v-if="dataList.length==0" class="cumtom-list placeholderText" style="height: 32px; line-height: 32px;top: 0px">{{placeholderText}}</div>
    <el-select v-model="value" multiple :placeholder="placeholderText" clearable @change="getValue" :style="{width: divWidth+'px'}">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        <div class="optionBig">
          <div class="name">{{ item.label }}</div>
          <div class="unit">@{{ item.WeChatName }}</div>
        </div>
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: "WeChat",
  props: {
    options: {
      type: Array,
      default: () => [],
    },
    divWidth: {
      type: Number,
      default: 240
    },
    placeholderText:{
      type:String,
      default:'请选择',
    },
  },
  data() {
    return {
      value: null,
      dataList: [],
    }
  },
  methods: {
    getValue(e) {
      console.log('e的值', e);
      let list = [];
      this.options.forEach((item) => {
        e.forEach((sitem => {
          if (sitem == item.value) {
            list.push(item);
          }
        }))
      });
      this.dataList=list;
      this.$emit('getValue', list);
    }
  },
}
</script>

<style scoped lang="scss">
.cumtom {
  position: relative;
  width: 100%;
  z-index: 2;
  background: #fff;
  .cumtom-list {
    width: 100%;
    position: absolute;
    z-index: -1;
    height: 32px;
    bottom: 0px;
    display: flex;
    padding: 0px 10px;
    box-sizing: border-box;

  }
}

.optionBig {
  display: flex;

  .unit {
    color: rgb(240, 139, 0);
  }
}

.list-unit {
  color: rgb(240, 139, 0);
}

::v-deep .el-select {
  width: 100%;
  position: relative;
  top: -4px;
}

::v-deep .el-select > .el-input {
  font-size: 0px;

}

::v-deep .el-input--small .el-input__inner {
  background: none !important;
}

::v-deep .el-select__tags {
  display: none;
}
.list-tags {
  display: flex;
  border: 1px solid #eee;
  padding: 0px 10px;
  background: #f7f7f7;
  margin-right: 10px;
  height: 28px;
  display: flex;
  margin-top:-2px;
  align-items: center;
}
 .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
  top: 0px !important;
}
.placeholderText {
  color:#c0c4cc;
}
</style>
